<template>
<!--  <div class="row justify-center container-row row-content">-->
<!--      <div class="row row-padding wrapper">-->
  <div class="justify-center container-row row-content">
    <div class="row-padding justify-center container-xxl container-row wrapper">
        <div>
          <div class="title">Filter:</div>
          <div class="filter">
            <q-input class="search" outlined v-model="payload.key_words" placeholder="Search" color="grey">
              <template v-slot:append>
                <q-icon v-if="payload.key_words !== ''" name="close" @click="payload.key_words = ''" class="cursor-pointer" />
              </template>
            </q-input>

            <div class="price">
              <q-input
                outlined
                v-model="payload.shop_min_price"
                type="number"
                style="max-width: 100px"
                prefix="$"
                color="grey"
              >
              </q-input>
              <div class="interval">
                <q-icon :name="biDash"></q-icon>
              </div>
              <q-input
                  outlined
                  v-model="payload.shop_max_price"
                  type="number"
                  style="max-width: 100px"
                  prefix="$"
                  color="grey"
              >
              </q-input>
            </div>
          </div>
        </div>

        <div style="margin-left: auto">
          <div class="title">Sort by:</div>
          <div class="store">
            <q-select color="grey" style="width: 250px" outlined v-model="payload.sort_field" :options="Object.keys(options)" transition-show="jump-up" transition-hide="jump-up">
              <template v-slot:append>
                <q-icon v-if="payload.sort_field !== ''" name="close" @click.stop.prevent="payload.sort_field=''" class="cursor-pointer"></q-icon>
              </template>
            </q-select>

            <q-btn class="btn-push" push :color="payload.sort ? 'black' : 'secondary'" @click="payload.sort = !payload.sort">
              <div class="row items-center no-wrap sory-icon">
                <q-icon :name="payload.sort ? biSortDownAlt : biSortUp" :color="payload.sort ? 'white' : 'white'"></q-icon>
              </div>
            </q-btn>
          </div>
        </div>
    </div>
      <productResult :num="productCount"></productResult>
      <div class="row-padding">
        <div class="grid--layout">
          <aplusmax-goods-card v-for="item in items" :key="item.goods_id" :goodsInfo="item"></aplusmax-goods-card>
        </div>
      </div>
      <div class="q-pa-lg flex flex-center">
        <q-pagination
            v-model="pageObj.page"
            color="black"
            :max="Math.ceil(productCount / pageObj.page_size)"
            :max-pages="6"
            boundary-numbers
            size="16px"
        />
      </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, reactive, watch, onMounted} from 'vue'
import {biSortUp, biSortDownAlt, biDash} from "@quasar/extras/bootstrap-icons";
import productResult from "./components/product-result.vue"
import {goodsList} from "../../api/goods";
import {useRoute} from "vue-router";

defineProps({})
const route = useRoute()

const emit = defineEmits([])
const payload = reactive({
  key_words: "",
  shop_min_price: 0,
  shop_max_price: 0,
  category_id: 0,
  sort: false,
  sort_field: "created_at",
})
const productCount = ref(0)
const getGoodList = (payload) => {
  goodsList(payload).then((res) => {
    items.value = res.data.goods_li_info
    productCount.value = res.data.count
    console.log(res)
  }).catch((err) => {
    console.log(err)
  });
}

onMounted(() => {
  if (route.query && route.query.search){
    payload.key_words = route.query.search
  }
})

// 监听路由的变化
watch(() => route.params.id, (newId, oldId) => {
  if (newId) {
    payload.category_id = newId
  }
}, { immediate: true }) // immediate: true 确保组件初始化时也会执行

const options = {
  shop_min_price : "shop_min_price",
  shop_max_price: "shop_max_price",
  created_at: "created_at",
  click: "click",
  score: "score",
  is_new: "is_new",
  is_hot: "is_hot"
}

const items = ref()
const pageObj = reactive({
  page: 1,
  page_size: 28,
})

let timer: any = null;
watch(payload,(newValue,oldValue)=>{
  if (newValue.shop_min_price < 0){
    payload.shop_min_price = 0
    return
  }
  if (newValue.shop_max_price < 0){
    payload.shop_max_price = 0
    return
  }
  const min_price = parseInt(newValue.shop_min_price)
  const max_parice = parseInt(payload.shop_max_price)
  if ( min_price > max_parice ){
    payload.shop_max_price = min_price + 1
  }
  if (timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    // price 为负数
    console.log('page发生改变了',newValue,oldValue)
    let newPayload = {}
    Object.assign(newPayload, payload, pageObj)
    let pL = JSON.parse(JSON.stringify(newPayload))
    pL.shop_min_price = parseInt(pL.shop_min_price) * 100
    pL.shop_max_price = parseInt(pL.shop_max_price) * 100
    getGoodList(pL)
  }, 500);
  // payload.page = newValue
  // getGoodList(newValue)
},{immediate:true})

watch(pageObj,(newValue,oldValue)=>{
  let newPayload = {}
  Object.assign(newPayload, payload, pageObj)
  let pL = JSON.parse(JSON.stringify(newPayload))
  pL.shop_min_price = parseInt(pL.shop_min_price) * 100
  pL.shop_max_price = parseInt(pL.shop_max_price) * 100
  getGoodList(pL)
  scrollToTop()
})
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动效果
  });
}
defineExpose({})
</script>

<style scoped lang='less'>
.grid--layout {
  --grid-gap: 26px;
  --visible-cols: 4;
  --col-gap: var(--grid-gap);
  --col-size: calc((100% - var(--col-gap)*(var(--visible-cols) - 1)) / var(--visible-cols));
  display: grid;
  grid-gap: var(--col-gap);
  grid-template-columns: repeat(var(--visible-cols), var(--col-size));
}
.wrapper{
  display: flex;
}
.row-padding{
  padding: 0 50px;
}
.search{
  margin-right: 30px;
  width: 300px;
}
.sory-icon{
  color: rgba(0,0,0,0.54);
}
.filter{
  display: flex;
}
.store{
  display: flex;
  .btn-push{
    border-radius: 4px;
  }
}
.price{
  display: flex;
  justify-content: center;
  align-items: center;
  .interval{
    margin: 0 2px;
  }
}
.page{
  :deep(.q-icon){
    font-size: 18px;
  }
}
.title{
  margin-bottom: 15px;
}

</style>